<!DOCTYPE html>
<html>
<head>
    <title>Query Data</title>
    <style>
        body { max-width: 600px; margin: 20px auto; padding: 20px; }
        .container { background: #f5f5f5; padding: 20px; border-radius: 8px; }
        input { width: 100%; margin: 10px 0; padding: 8px; }
        button { background: #2196F3; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; }
        button:hover { background: #1976D2; }
        .result { margin-top: 20px; padding: 10px; }
    </style>
</head>
<body>
    <div class="container">
        <h1>Query by Phone Number</h1>
        <input type="text" id="phoneNumber" placeholder="Enter phone number">
        <button onclick="searchData()">Search</button>
        <div class="result" id="result"></div>
    </div>

    <script>
        function searchData() {
            const phone = document.getElementById('phoneNumber').value;
            const resultDiv = document.getElementById('result');
            
            if (!phone) {
                resultDiv.textContent = 'Please enter a phone number';
                return;
            }
            
            fetch(`/query?phone_number=${encodeURIComponent(phone)}`)
                .then(response => response.json())
                .then(data => {
                    if (data.error) {
                        resultDiv.innerHTML = `<div style="color: red;">${data.error}</div>`;
                    } else {
                        if (data.length === 0) {
                            resultDiv.textContent = 'No records found';
                        } else {
                            resultDiv.innerHTML = `
                                <h3>Found ${data.length} records</h3>
                                ${data.map(item => `
                                    <div class="record">
                                        <p><strong>Name:</strong> ${item.姓名}</p>
                                        <p><strong>Item:</strong> ${item.物品名称}</p>
                                        <p><strong>Tracking ID:</strong> ${item.单号}</p>
                                    </div>
                                `).join('')}
                            `;
                        }
                    }
                })
                .catch(error => {
                    resultDiv.innerHTML = `<div style="color: red;">Error: ${error.message}</div>`;
                });
        }
    </script>
</body>
</html>